<template>
  <div>
    <div class="mb-10px">
      <el-button @click="handleViewConfig()">配置视图</el-button>
      <el-button @click="createClick()">创建模具</el-button>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="no" label="编号" width="180" />
        <el-table-column prop="name" label="名称" />
        <!-- <el-table-column v-for="item in tableView" :key="item.name" :label="item.title" :prop="item.name"
          :width="item.width">
          <template #default="{ row }">
            {{ row.cfv?.[item.name]?.label || '--' }}
          </template>
        </el-table-column> -->
        <form-display :tableView="tableView"></form-display>
        <el-table-column width="180" label="操作">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="edit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <create-form ref="createFormRef" @close-cb="getMoldList"></create-form>
      <view-config ref="viewConfigRef" @submit-cb="getTableView" @update-view="updateView"></view-config>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, useTemplateRef } from 'vue'
import { queryMoldList } from '@/api/mold'
import { queryModelView } from '@/api/model'
import createForm from './create-form.vue'
import viewConfig from './view-config.vue'

import formDisplay from '@/components/form-display/index.vue'

const createFormRef = useTemplateRef<InstanceType<typeof createForm>>('createFormRef')
const viewConfigRef = useTemplateRef<InstanceType<typeof viewConfig>>('viewConfigRef')
const tableData = ref<any[]>([])
const tableView = ref<any[]>([])
const viewInfo = ref<any>({})
const createClick = () => {
  createFormRef.value?.openDialog('create')
}
const getMoldList = async () => {
  const res: any = await queryMoldList()
  if (res.code === 0) {
    tableData.value = [...res.data]
  }
}

const getTableView = async () => {
  const res: any = await queryModelView({ modelIdentifier: 'test_model_11', viewIdentifier: 'list' })
  if (res.code === 0) {
    viewInfo.value = { ...res.data }
    tableView.value = [...res.data.columns.filter((item: any) => item.display)]
  }
}



const edit = (row: any) => {
  createFormRef.value?.openDialog('edit', row)
}

const handleViewConfig = () => {
  viewConfigRef.value?.openDialog(viewInfo.value)
}

const updateView = (view: any) => {
  tableView.value = [...view.filter((item: any) => item.display)]
}

onMounted(() => {
  getMoldList()
  getTableView()
})
</script>
<style scoped></style>
